<template>
  <div class="userInfo">
    <div class="userInfo-center">
      <div class="userInfo-left">
        <div class="touxiang">
          <el-avatar :src="user.userAvatar" style="width: 150px;height: 150px" >
          </el-avatar>
          <span style="font-size: 12px;color: #666666;margin-bottom: 8px;margin-top: 4px">当前头像</span>
          <el-button size="mini" @click="dialogVisible = true">
            <span>修改头像</span>
          </el-button>
        </div>

      </div>
      <div class="userInfo-right">
        <el-form label-width="80px" :model="userForm" size="mini">
          <el-form-item label="用户名">
            <el-input v-model="userForm.userName" disabled></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="userForm.userPhone" disabled></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="userForm.realName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model.number="userForm.userSex" >
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份类型">
            <el-radio-group v-model.number="userForm.userType" disabled>
              <el-radio :label="0">村民</el-radio>
              <el-radio :label="1">游客</el-radio>
            </el-radio-group>
          </el-form-item>
          <div style="display: flex;justify-content: center">
            <el-button @click="updateUser" size="mini">立即修改</el-button>
          </div>
        </el-form>
        <el-form label-width="80px" :model="passwordForm" :ref="passwordForm" :rules="passwordRules" size="mini" style="margin-top: 40px">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input v-model="passwordForm.oldPassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="reNewPassword">
            <el-input v-model="passwordForm.reNewPassword" show-password></el-input>
          </el-form-item>
          <div style="display: flex;justify-content: center">
            <el-button @click="updateUserPassword" size="mini">立即修改</el-button>
          </div>
        </el-form>

      </div>
    </div>

    <avatar-cropper :dialogVisible.sync="dialogVisible" @closeAvatarDialog="closeAvatarDialog"></avatar-cropper>
  </div>
</template>


<script>
import avatarCropper from '@/components/avatarCropper'
import {getRealUserById, updatePassword, updateUser} from "@/api/allApi";
import {useUser} from "@/store/userStore";
export default {
  components: {
    avatarCropper
  },
  created() {
    this.user = JSON.parse(window.localStorage.getItem('access-user'))
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      user:'',
      User:useUser(),
      userForm:{},
      passwordForm:{},
      passwordRules:{
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
        ],
        reNewPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
      },
    }
  },
  watch:{
    "User.changeUserAvatar" : function (){
      this.user = JSON.parse(window.localStorage.getItem('access-user'))
    }
  },
  methods: {
    closeAvatarDialog() {
      this.dialogVisible = false
      this.getUserById()
    },
    getUserById() {
      getRealUserById(this.user.userId).then(res=>{
        if (res.data.success) {
          this.userForm = res.data.data
        }
      })
    },
    updateUser() {
      this.userForm.userId = this.user.userId
      updateUser(this.userForm).then(res=>{
        if (res.data.success) {
          this.$message.success('修改成功')
        }else {
          this.$message.error(res.data.message)
        }
      })
    },
    updateUserPassword() {
      this.passwordForm.userId = this.user.userId
      updatePassword(this.passwordForm).then(res=>{
        console.log(this.passwordForm)
        if (res.data.success) {
          this.$message.success('密码修改成功')
          this.$router.push({path:'/'})
          //退出登陆，清空token
          localStorage.removeItem('access-user');
          this.$router.push({path:'/userLayout'})
          this.isLogin= true;
        }else {
          this.$message.error(res.data.errorMsg)
        }
      })
    }
  },
  mounted() {
    this.getUserById()
  }
}
</script>

<style lang="less" scoped>
  .userInfo {
    padding: 20px;
    display: flex;
    justify-content: center;

    .userInfo-center {
      display: flex;
      justify-content: space-between;
      .userInfo-left {
        display: flex;
        align-items: center;
        .touxiang {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 20px;
          padding: 20px;
        }

      }

      .userInfo-right {

        padding:0 50px;
        margin-left: 50px;
        border-left: 1px solid #cccccc;
      }
    }
  }

</style>